<template>
  <div>
  <van-nav-bar
      title="登录"
      left-arrow
      @click-left="$router.back()"
  />


    <van-form @submit="btn"
              :show-error="false"
              :show-error-message="false"
              @failed="onFailed"
              validate-first
    >
    <van-field
        v-model="user.mobile"
        left-icon="smile-o"
        placeholder="请输入手机号"
        :rules="formRules.mobile"
    />
    <van-field
        v-model="user.code"
        clearable
        left-icon="music-o"
        placeholder="请输入验证码"
    > <template #button>
      <van-button size="small" round>发送验证码</van-button>
    </template>
    </van-field>

    <div class="warp" @click="btn">
      <van-button type="info" block>登录/注册</van-button>
    </div>
    </van-form>
  </div>
</template>

<script>
import {login} from "@/api/user";
import { Toast } from 'vant';


export default {
  name: "goPage",
  data(){
    return{
      user:{
        mobile:'',
        code:''
      },
      formRules:{
        mobile: [{ required: true, message: '请填写账号' }]

      }
    }
  },
  methods: {
     async btn(){
       Toast.loading({
         message: '加载中...',
         forbidClick: true,//禁止背景点击
         duration:2000,
       });
       try {
         const  res = await login(this.user)
         Toast.success('登陆成功')
         console.log(res)
       }catch (err){
         console.log(err)
         Toast.fail('登陆失败')

       }
      },
    onFailed(error){
       if (error.errors[0]){
         this.$toast({message:error.errors[0].message, position:"top"
         })
       }
    }
}

}
</script>

<style scoped lang="scss">
 .van-nav-bar{
  background-color: #32AAA9;
   .van-nav-bar__content{
     color: black;
   }
}
 .van-field__control{
 }
 .warp{
   padding: 26px 16px;
   .van-button__text{
     color: grey;
   }
 }


</style>